import React, { lazy } from "react"
import Home from "@/views/Home"
import Login from "@/views/Login"
import { Navigate } from "react-router-dom"
const Page1 = lazy(() => import("@/views/Page1"))
const Page2 = lazy(() => import("@/views/Page2"))
const Page301 = lazy(() => import("@/views/Page301"))

const withLoadingComponent = (comp: JSX.Element) => <React.Suspense fallback={<div>Loading...</div>}>{comp}</React.Suspense>

const routes = [
  { path: "/", element: <Navigate to="/page1" /> },
  { path: "*", element: <Navigate to="/page1" /> },
  { path: "/login", element: <Login /> },
  {
    path: "/", element: <Home />, children: [
      { path: "/page1", element: withLoadingComponent(<Page1 />) },
      { path: "/page2", element: withLoadingComponent(<Page2 />) },
      { path: "/page3/page301", element: withLoadingComponent(<Page301 />) }
    ]
  },
]

export default routes